<template>
  <uni-nav-bar title="车友团列表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package center" style="justify-content: space-around;">
    <view :style="{color:active===1?'#2995FA':'#333'}" @click="changTeam(1)">普通团</view>
    <view :style="{color:active===2?'#2995FA':'#333'}" @click="changTeam(2)">超级团</view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package taem" v-for="item in orderLists" :key='item.id'
      @click="navTo('administrator/teamList/teamDetail?id='+item.id)">
      <view>{{item.name}}</view>
      <view :style="{background:item.status!=1?'#FFA759':'#2995FA '}">{{item.status!=1?'未成团':'已成团'}}</view>
    </view>
  </scroll-view>
  <view class="add" @click="navTo('administrator/teamList/addTeam')">新增</view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { onShow } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getTeamList } from '@/gql/administrator';
  import { showLoading } from '@/utils/prompt';
  import { ref } from 'vue';
  const active = ref(1)
  const pageHeight = ref();
  const orderLists = ref([]);
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 180;
    },
  });
  onShow(() => {
    active.value = 1
    orderLists.value = []
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getTeamList,
      variables: {
        type: active.value
      },
    };
    toPublish(
      'ql/control/getTeamList',
      payload,
      (obj : any) => {
        const { getTeamList } = obj.data;
        orderLists.value = getTeamList;
      }
    );
  }
  function changTeam(num : number) {
    active.value = num
    orderLists.value = []
    init()
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 20rpx auto;
    font-size: 32rpx;
  }

  .taem:nth-of-type(1) {
    margin-top: 0px;
  }

  .taem {
    position: relative;
    padding: 30rpx 20rpx;

    view:nth-of-type(2) {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 103rpx;
      height: 41rpx;
      background: #FFA759;
      border-radius: 0px 5px;
      text-align: center;
      line-height: 41rpx;
      color: #fff;
    }
  }
</style>